<div class="appNode" data-o2-element="appNode">
    <div class="menuArea">
        <div class="menu">
            <div class="menuTitle">
                <div class="menuTitleText">{{$.lp.title}}</div>
                <div class="menuTitleAction" data-o2-events="click:startProcess">
                    <icon class="o2icon-zengjia mainColor_color"></icon>
                </div>
            </div>
            <div class="menuItem" data-o2-element="taskMenuNode" data-o2-events="click:loadList:task">
                <div class="menuItemIcon"><icon class="o2icon-daiban"></icon></div>
                <div class="menuItemCount" data-o2-element="taskCountNode"></div>
                <div class="menuItemText">{{$.lp.task}}</div>
            </div>

            <div class="menuItem" data-o2-element="taskCompletedMenuNode" data-o2-events="click:loadList:taskCompleted">
                <div class="menuItemIcon"><icon class="o2icon-yiban"></icon></div>
                <div class="menuItemCount" data-o2-element="taskCompletedCountNode"></div>
                <div class="menuItemText">{{$.lp.taskCompleted}}</div>
            </div>

            <div class="menuItem" data-o2-element="readMenuNode" data-o2-events="click:loadList:read">
                <div class="menuItemIcon"><icon class="o2icon-daiyue"></icon></div>
                <div class="menuItemCount" data-o2-element="readCountNode"></div>
                <div class="menuItemText">{{$.lp.read}}</div>
            </div>

            <div class="menuItem" data-o2-element="readCompletedMenuNode" data-o2-events="click:loadList:readCompleted">
                <div class="menuItemIcon"><icon class="o2icon-yiyue"></icon></div>
                <div class="menuItemCount" data-o2-element="readCompletedCountNode"></div>
                <div class="menuItemText">{{$.lp.readCompleted}}</div>
            </div>

            <div class="menuItem" data-o2-element="reviewMenuNode" data-o2-events="click:loadList:review">
                <div class="menuItemIcon"><icon class="o2icon-document-copy"></icon></div>
                <div class="menuItemCount" data-o2-element="reviewCountNode"></div>
                <div class="menuItemText">{{$.lp.review}}</div>
            </div>

            <div class="menuItem" data-o2-element="draftMenuNode" data-o2-events="click:loadList:draft">
                <div class="menuItemIcon"><icon class="o2icon-caogao"></icon></div>
                <div class="menuItemCount" data-o2-element="draftCountNode"></div>
                <div class="menuItemText">{{$.lp.draft}}</div>
            </div>

            <div class="menuItem" data-o2-element="myCreatedMenuNode" data-o2-events="click:loadList:myCreated">
                <div class="menuItemIcon"><icon class="o2icon-publish1"></icon></div>
                <div class="menuItemCount" data-o2-element="myCreatedCountNode"></div>
                <div class="menuItemText">{{$.lp.myCreated}}</div>
            </div>

            <div class="createProcessAction mainColor_bg" data-o2-events="click:startProcess">
                <icon class="o2icon-zengjia"></icon>
                <span>{{$.lp.createProcess}}</span>
            </div>
        </div>
    </div>

    <div class="contentArea">
        <div class="content" data-o2-element="contentNode">
            <div class="contentTitle" data-o2-element="listTitleNode">
                <div class="contentTitleArea">
                    <div class="contentTitleActionArea" data-o2-events="click:showFilter" data-o2-element="filterActionNode">
                        <icon class="o2icon-saixuan"></icon>
                        <span>{{$.lp.filter}}</span>
                    </div>
                    <div class="contentTitleFilterArea" data-o2-element="filterItemArea"></div>
                </div>
            </div>
            <div class="contentList" data-o2-element="listContentNode">
                <div class="skeleton" data-o2-element="skeletonNode">
                    <div class="skeleton_item" style="width: 90%"></div>
                    <div class="skeleton_item" style="width: 60%"></div>
                    <div class="skeleton_item"></div>
                    <div class="skeleton_item" style="width: 70%"></div>
                    <div class="skeleton_item"></div>
                    <div class="skeleton_item" style="width: 60%"></div>
                    <div class="skeleton_item"></div>
                    <div class="skeleton_item" style="width: 80%"></div>
                </div>
            </div>
            <div class="contentBottom" data-o2-element="listBottomNode">
                <div class="contentPageArea">
                    <div class="firstPage" data-o2-events="click:firstPage">{{$.lp.firstPage}}</div>
                    <div class="prevPage o2icon-triangle_left" data-o2-events="click:prevPage"></div>
                    <div class="lastPage" data-o2-events="click:lastPage">{{$.lp.lastPage}}</div>
                    <div class="nextPage o2icon-triangle_right" data-o2-events="click:nextPage"></div>
                    <div class="pageNumberArea" data-o2-element="pageNumberAreaNode"></div>
                </div>
            </div>
        </div>

    </div>
</div>